<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" media="screen and (min-width:768px)" href="../index/index.css">
    <link rel="stylesheet" media="screen and (max-width:768px)" href="../index/index1.css">
    <link rel="stylesheet" href="../css/swiper-bundle.css">
    <script src="../js/swiper-bundle.js"></script>
    <script src="../jq/jquery-1.12.4.js"></script>
</head>

<div id="school">
    <!-- 导航栏 -->
    <label for="check" class="checkbtn">
        <img src="../image/隐藏.png" alt="">
    </label>
    <div class="nav">
        <div class="nav-img">
            <img src="../image/2-min.png" alt="">
        </div>
        <div class="nav-word">
            <ul>
                <li><a href="../index/index.html">首页</a></li>
                <li><a href="../overview/overview.html">部门概况</a></li>
                <li><a href="../overview/overview.html#item2">师资队伍</a></li>
                <li><a href="../overview/overview.html#item3">思政建设</a></li>
                <li><a href="../overview/overview.html#item4">红馆</a></li>
                <li><a href="../overview/overview.html#item5">心理健康教育中心</a></li>
                <li><a href="../overview/overview.html#item6">教学科研</a></li>
                <li><a href="../overview/overview.html#item7">学生社团</a></li>
            </ul>
            <div class="nav-serch">
                <input type="text" placeholder="请输入关键词搜索">
                <img src="../image/搜索.png" alt="">
            </div>

        </div>
    </div>
    <!-- 轮播图 -->
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img class="image" src="../image/1-min.png" alt="">
            </div>
            <div class="swiper-slide">
                <img class="image" src="../image/1-min.png" alt="">
            </div>
            <div class="swiper-slide">
                <img class="image" src="../image/1-min.png" alt="">
            </div>
        </div>
        <!--如果需要滚动条-->
        <div class="swiper-pagination"></div>       
    </div>
    <!-- 新闻公告 -->
    <div class="newsder">
        <div class="news">
            <div class="news-top">
                <div class="news-top-color">XIN WEN GONG GAO</div>
                <h2>新闻公告</h2>
            </div>
            <div class="news-center">
                <div class="center-left">
                    <img src="../image/3-min.png" alt="">
                    <div class="none">
                        传承八一精神 凝聚奋进力量
                    </div>
                </div>
                <div class="center-right">
                    <div class="center-top">
                        <h3>“为党育人 为国育才” ————9位法大教师倾情讲述育人故事</h3>
                        <div class="color">
                            <text>2022-11-02</text>
                        </div>
                    </div>
                    <div class="buttom">
                        三尺讲台育英才，一方舞台展风采。“课比天大，是一字、一
                        块帝，是心照不宣的默契三尺讲台育英才，一方舞台辰风采比
                        天大，是一幅字、一块画，是心照不宣的默契......
                    </div>
                    <div class="buttom-img">
                        <div>
                            <img src="../image/左箭头.png" alt="">
                            <img src="../image/右箭头.png" alt="">
                        </div>
                        <text><span>1</span>/3</text>
                    </div>
                </div>
            </div>
            <div class="news-buttom">
                <div class="buttom-left">
                    <span>“为党育人为国育才”一9位法大教师倾情讲述育</span>
                    三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、
                    一块匾，是心照不宣的默契三尺讲台育英才
                    <div>2022-11-02</div>
                </div>
                <div class="buttom-left">
                    <span>“为党育人为国育才”一9位法大教师倾情讲述育</span>
                    三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、
                    一块匾，是心照不宣的默契三尺讲台育英才
                    <div>2022-11-02</div>
                </div>
                <div class="buttom-left">
                    <span>“为党育人为国育才”一9位法大教师倾情讲述育</span>
                    三尺讲台育英才，一方舞台展风采。“课比天大，是一幅字、
                    一块匾，是心照不宣的默契三尺讲台育英才
                    <div>2022-11-02</div>
                </div>
            </div>
            <!-- 查看更多 -->
            <div class="much">
                查看更多
                <img src="../image/右箭头.png" alt="">
            </div>
        </div>
    </div>
    <!-- 党建引领 -->
    <div class="dang">
        <div class="dang-top">
            <div class="dang-top-color">DANGJIANYINLING</div>
            <h2>党建引领</h2>
        </div>
        <div class="dang-content">
            <div class="dang-first">
                <img src="../image/5-min.png" alt="">
                <div class="first-one">
                    <div class="number">
                        <div class="num-top">02</div>
                        <div class="num-buttom">2022-11</div>
                    </div>
                    <div class="dang-text">
                        关于举办第二届(2022年)烟台市乡村
                        面艺关于举办第二届(2022年)烟台市
                        乡村面艺…
                    </div>
                    
                </div>
                <div class="line"></div>
            </div>
            <div class="dang-first">
                <img src="../image/5-min.png" alt="">
                <div class="first-one">
                    <div class="number">
                        <div class="num-top">02</div>
                        <div class="num-buttom">2022-11</div>
                    </div>
                    <div class="dang-text">
                        关于举办第二届(2022年)烟台市乡村
                        面艺关于举办第二届(2022年)烟台市
                        乡村面艺…
                    </div>
                </div>
                <div class="line"></div>
            </div>
            <div class="dang-first">
                <img src="../image/5-min.png" alt="">
                <div class="first-one">
                    <div class="number">
                        <div class="num-top">02</div>
                        <div class="num-buttom">2022-11</div>
                    </div>
                    <div class="dang-text">
                        关于举办第二届(2022年)烟台市乡村
                        面艺关于举办第二届(2022年)烟台市
                        乡村面艺…
                    </div>
                </div>
                <div class="line"></div>
            </div>
        </div>
    </div>
    <!-- 查看更多 -->
    <div class="much">
        查看更多
        <img src="../image/右箭头.png" alt="">
    </div>
    <!-- 教研动态 -->
    <div id="resear">
        <div class="research">
            <div class="research-top">
                <div class="research-top-color">JIAOYAN DONGTAI</div>
                <h2>教研动态</h2>
            </div>
            <div class="research-content">
                <div class="research-img">
                    <img src="../image/6-min.png" alt="">
                    <text>“为党育人 为国育才”</text>
                </div>
                <div class="research-text">
                    <ul>
                        <li>“为党育人 为国育才”<span>2022-11-2</span></li>
                        <li>“为党育人 为国育才”<span>2022-11-2</span></li>
                        <li>“为党育人 为国育才”<span>2022-11-2</span></li>
                        <li>“为党育人 为国育才”<span>2022-11-2</span></li>
                        <li>“为党育人 为国育才”<span>2022-11-2</span></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 查看更多 -->
        <div class="much">
            查看更多
            <img src="../image/右箭头.png" alt="">
        </div>
    </div>
    <!-- 社会服务 -->
    <div class="society">
        <div class="society-top">
            <div class="society-top-color">SHEHUI FUWU</div>
            <h2>社会服务</h2>
        </div>
        <div class="society-content">
            <div class="society-left">
                <img src="../image/10-min.png" alt="">
                <div class="society-text">
                    <h3>形势与政策报告会之“新东欧地缘政治冲突及…</h3>
                    形势与政策报告会之“新东欧地缘政治冲突及形势与政策报告会之“新东欧地缘政治冲突
                    及形势与政策报告会之“新东欧地缘政治冲突及…
                    <div class="society-bottom">
                        <img src="../image/11-min.png" alt="">
                        <text>2022-09-29</text>
                    </div>
                </div>
            </div>
            <div class="society-right">
                <div class="society-right-top">
                    <img src="../image/8-min.png" alt="">
                    <h1>红馆</h1>
                </div>
                <div class="society-right-bottom">
                    <img src="../image/9-min.png" alt="">
                    <h1>心理健康中心</h1>
                </div>
            </div>
        </div>
    </div>
    <!-- 查看更多 -->
    <div class="much1">
        查看更多
        <img src="../image/右箭头.png" alt="">
    </div>
    <!-- 主题活动 -->
    <div id="activity">
        <div class="activit">
            <div class="activity-top">
                <div class="activity-top-color">
                    ZHUTI HUODONG
                </div>
                <h2>主题活动</h2>
            </div>
            <div class="activity-content">
                <div class="activity-first">
                    <div class="first-img">
                        <img src="../image/12-min.png" alt="">
                        <text>山东城院“五心工程”温碳校园</text>
                    </div>
                    <div class="first-text">
                        3月24日，一场别开生面的"
                        平台通过网络直播的形式拉
                        开帷幕…
                    </div>
                </div>
                <!-- 2 -->
                <div class="activity-first">
                    <div class="first-img">
                        <img src="../image/13-min.png" alt="">
                        <text>划重点一图读恒山东
                            城院“十四五”发
                            展规划</text>
                    </div>
                    <div class="first-text">
                        3月20日下午，烟台市高新区
                        管委副主任李如鹏、市教育
                        局高新区分局…
                    </div>

                </div>
                <!-- 3 -->
                <div class="activity-first">
                    <div class="first-img">
                        <img src="../image/13-min.png" alt="">
                        <text>划重点一图读恒山东
                            城院“十四五”发
                            展规划</text>
                    </div>
                    <div class="first-text">
                        3月20日下午，烟台市高新区
                        管委副主任李如鹏、市教育
                        局高新区分局…
                    </div>

                </div>
                <div class="activity-first">
                    <div class="first-img">
                        <img src="../image/13-min.png" alt="">
                        <text>划重点一图读恒山东
                            城院“十四五”发
                            展规划</text>
                    </div>
                    <div class="first-text">
                        3月20日下午，烟台市高新区
                        管委副主任李如鹏、市教育
                        局高新区分局…
                    </div>
                </div>
            </div>
        </div>
        <!-- 查看更多 -->
        <div class="much">
            查看更多
            <img src="../image/右箭头.png" alt="">
        </div>
    </div>
    <!-- 马院风采 -->
    <div class="mien">
        <div class="mien-top">
            <div class="mien-top-color">MAYUANFNEGCAI</div>
            <h2>马院风采</h2>
        </div>
        <div class="mien-content">
            <div class="swiper mySwiper2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="../image/微信图片_202211181533374-min.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="../image/9adae89e1324a224a0d02c955d950b9-min.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="../image/微信图片_20221118153337-min.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="../image/微信图片_202211181533371-min.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="../image/微信图片_202211181533372-min.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="../image/微信图片_202211181533373-min.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="../image/微信图片_202211181533374-min.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="../image/9adae89e1324a224a0d02c955d950b9-min.jpg" alt=""></div>
                </div>
            </div>
        </div>
        <div class="box">
            <img src="../image/9adae89e1324a224a0d02c955d950b9-min.jpg" alt="">
            <img src="../image/微信图片_202211181533371-min.jpg" alt="">
            <img src="../image/微信图片_202211181533372-min.jpg" alt="">
            <img src="../image/微信图片_202211181533373-min.jpg" alt="">
        </div>
        <!-- 查看更多 -->
        <div class="much">
            查看更多
            <img src="../image/右箭头.png" alt="">
        </div>
    </div>
    <!-- 友情链接 -->
    <div class="connect">
        <ul>
            <li><a href="#">友情链接：</a></li>
            <li><a href="#">山东教育局</a></li>
            <li><a href="#">山东教育局</a></li>
            <li><a href="#">山东教育局</a></li>
            <li><a href="#">山东教育局</a></li>
            <li><a href="#">山东教育局</a></li>
            <li><a href="#">山东教育局</a></li>
            <li><a href="#">山东教育局</a></li>
            <li><a href="#">山东教育局</a></li>
            <li><a href="#">山东教育局</a></li>
        </ul>
    </div>
    <!-- 脚部 -->
    <div class="footer">
        <div class="footer-content">
            <img class="footer-left" src="../image/2-min.png" alt="">
            <text>地址:山东省烟台市高新区海天路1001号</text>
            <text>办公室电话：0535-293876</text>
            <div class="footer-right">
                <img class="footer-right1" src="../image/二维码.jpg" alt="">
                <div class="footer-text">微信公众号</div>
            </div>
        </div>
        <div class="footer-color">
            Copyright C山东省城市服务技师学院版权所有
        </div>
    </div>
</div>
</body>
<script>
    var mySwiper = new Swiper('.swiper', {
        autoplay: {
            delay: 2000,
        },
        loop: true,//循环模式选项
        // 如果需要滚动条
        pagination: {
            el: '.swiper-pagination',
        },
    })
    var swiper = new Swiper(".mySwiper2", {
        slidesPerView: 5,
        spaceBetween: 30,
        centeredSlides: false,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        autoplay: {
            delay: 3000,
        },
    });  
    $(function () {
        $('.checkbtn img').click(function () {
            $('.nav-word').toggle();
        })
    })      
</script>

<!-- <script>
    var swiper = new Swiper('.swiper-container', {
        spaceBetween: 30,
        centeredSlides: false,
        slidesPerView: '5',
        loop: true,  //是否循环
        slidesPerView: 5, //同时展示6个内容
        spaceBetween: 15, //在slide之间设置距离（单位px）。
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
</script> -->

</html>